<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
    <link rel="icon" href="./logo.png">
    <style>
      .ball {
        width: 100px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
  
      .ball > div {
          background-color: #279fcf;
          width: 15px;
          height: 15px;
          border-radius: 100%;
          margin: 2px;
          animation-fill-mode: both;
          position: absolute;
      }
  
      /*设置各圆圈的位置以及动画*/
      .ball > div:nth-child(1) {
          top: 25px;
          left: 0;
          animation: loading 1s 0s infinite linear;
      }
      /*此处省略为其余7个圆形设置位置以及动画的代码*/
      .ball > div:nth-child(2) {
          top: 17px;
          left: 17px;
          animation: loading 1s 0.12s infinite linear;
      }
  
      .ball > div:nth-child(3) {
          top: 0;
          left: 25px;
          animation: loading 1s 0.24s infinite linear;
      }
  
      .ball > div:nth-child(4) {
          top: -17px;
          left: 17px;
          animation: loading 1s 0.36s infinite linear;
      }
  
      .ball > div:nth-child(5) {
          top: -25px;
          left: 0;
          animation: loading 1s 0.48s infinite linear;
      }
  
      .ball > div:nth-child(6) {
          top: -17px;
          left: -17px;
          animation: loading 1s 0.6s infinite linear;
      }
  
      .ball > div:nth-child(7) {
          top: 0;
          left: -25px;
          animation: loading 1s 0.72s infinite linear;
      }
  
      .ball > div:nth-child(8) {
          top: 17px;
          left: -17px;
          animation: loading 1s 0.84s infinite linear;
      }
  
      @keyframes loading {
          50% {
              opacity: 0.3;
              transform: scale(0.4);
          }
  
          100% {
              opacity: 1;
              transform: scale(1);
          }
      }
    </style>
    <script src="./static/global.js"></script>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div class="ball">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
